<!DOCTYPE html>
<html lang='cn'>
	<head>
		<meta name='viewport' content='width=device-width,initial-scale=1 .0 user-scale' />
		<meta charset='utf-8' />
		<title>像素灯网页配置</title>
		<style>
			html,
			body {
				height: 100%;
				margin: 0;
				padding: 0;
			}

			body {
				background: rgb(255, 255, 255) url(img/index.jpg) center center;
				background-size: cover;
				position: relative;
				/* 相对位置 */
			}

			.container {
				position: absolute;
				/* 绝对位置 */
				top: 50%;
				text-align: center;
				width: 100%;
				transform: translateY(-50%);
				/* 将div元素上移至自身高度的50% */
			}

			div {
				margin: 10px
			}

			h1 {
				line-height: 150px;
				color: royalblue;
				font-size: 50px;
			}

			p {
				line-height: 80px;
				color: royalblue;
				font-size: 22px;
				margin: 40px 0px 0px 0px;
			}

			.btn {
				width: 150px;
				height: 60px;
				background-color: #7cacae;
				color: #fff;
				font-size: 24px;
				line-height: 60px;
				margin: 30px auto;
				/* 设置其上下边距：30px 左右边距：自动 */
				border-radius: 10px;
				/* 给按钮增加圆角样式 */
				transition: 1s;
			}

			.btn:hover {
				background-color: royalblue;
				width: 300px;
				height: 100px;
				line-height: 100px;
				font-size: 36px;
				margin: 100px auto;
			}
		</style>
	</head>
	<body>
		<div class='container'>
			<h1>选择一个图案</h1>
			<img style='transform:scale(2)' id='emojis' onclick='clickEmoji(event);'
				src=''>
			<p id='out'></p> <canvas style='transform:scale(4)' id='emoji' width='8' height='8'></canvas>
			<script>
				var connection = new WebSocket('ws://' + location.hostname + ':81/', ['arduino']);
				connection.onopen = function() {
					connection.send('Connect ' + new Date());
				};
				connection.onerror = function(error) {
					console.log('WebSocket Error ', error);
				};
				connection.onmessage = function(e) {
					console.log('Server: ', e.data);
				};

				function clickEmoji(e) {
					var xo = 3;
					var yo = 3;
					var xs = 13;
					var ys = 12;
					var x = e.offsetX;
					var y = e.offsetY;
					var c = Math.round((x - xo - 4) / xs);
					var r = Math.round((y - yo - 4) / ys);
					document.getElementById('out').innerText = 'Selected [' + (c + 1) + ', ' + (r + 1) + ']';
					var img = document.getElementById('emojis');
					var ce = document.getElementById('emoji');
					var ctx = ce.getContext('2d');
					ctx.drawImage(img, -(xo + (xs * c)), -(yo + (ys * r)), 131, 122);
					var index = 'p' + c + '' + r;
					console.log('index: ' + index);
					connection.send(index);
				}
			</script>
			<form action='/' method='POST'>
				<input class='btn' type='submit' value='返回主页'>
			</form>
		</div>
	</body>
</html>